<template>
   <div>
        <h2>message</h2>
        <!-- <h3>模块化的数据</h3> -->
        <!-- <h3>{{ cartD }}</h3> -->
        <!-- <h3>{{ store.state.cart.cartData }}</h3> -->
        <!-- <button @click="changeM">触发mutations的改变</button> -->
   </div>
</template>

<script setup lang="ts">
   import { useStore } from 'vuex';
   import { ref,watch } from 'vue';
   let store = useStore()

   // 1. 怎么获取到vuex模块中存放的数据

   // let cartD = store.state.cart.cartData  // 当这个数据 赋值之后就不是 响应式的了
   let cartD = ref(store.state.cart.cartData)  // 因为 cartD已经在组件中了，而store.state.cart.cartData 在仓库里
   
   // console.log(store);

   const changeM = ()=>{
      // 触发模块中 cart 中的mutations定义 方法
      console.log('ccc');
      
      store.commit('cart/changeCart')   //这里选择 调用哪个方法
      // store.commit('me/changeCart')   //这里选择 调用哪个方法
      // console.log(cartD,1111); 
   }

   // watch(()=>store.state.cart.cartData,(newV)=>{      
   //    // console.log('newV',newV);      
   //    cartD.value = newV;      
   // })
   

</script>

<style>

</style>